<template>
  <a-dropdown :trigger="['click']" :getPopupContainer="getPopupContainer">
    <a-tooltip placement="top" v-if="statusIcon[record.status]">
      <template slot="title">
        <span>{{ taskUpdateDictCodeObj[record.status] }}</span>
      </template>
      <i
        class="iconfont"
        :class="`icon-${statusIcon[record.status].iconPig}`"
        style="position:absolute;top:-2px"
        :style="{ color: statusIcon[record.status].color }"
      ></i>
    </a-tooltip>
    <i
      v-else
      class="iconfont icon-jiance"
      style="fontWeight: bolder;position:absolute;top:-2px"
    ></i>
    <!-- 已结束和已取消 没有操作框 -->
    <a-menu v-show="auth" slot="overlay" v-if="editable">
      <a-menu-item class="operateItemTitle">{{ $t('statusChange') }}</a-menu-item>
      <a-menu-item class="operateItemSub" v-if="statusIcon[record.status]">
        <i
          class="iconfont"
          :class="`icon-${statusIcon[record.status].iconPig}`"
          :style="{ color: statusIcon[record.status].color }"
        ></i>
        {{ taskUpdateDictCodeObj[record.status] }}
        {{ $t('changedTo') }}
      </a-menu-item>
      <a-menu-item v-if="statusIcon[16]" @click="doAction('handelCancel',record)">
        <p>
          <i class="iconfont icon-quxiao" :style="{ color: statusIcon[16].color }"></i>
          {{ $t('canceled') }}
        </p>
      </a-menu-item>
      <a-menu-item v-if="statusIcon[16] && (record.status!=6 && record.status!=7 && record.status!=11 && record.type!=2 )" @click="doAction('handelCancelAndDeletePackage',record)">
        <p>
          <i class="iconfont icon-quxiao" :style="{ color: statusIcon[16].color }"></i>
          {{ $t('canceled') }}{{ $t('andDelete') }}
        </p>
      </a-menu-item>
      <!-- 挂起:进行中才能挂起操作 -->
      <a-menu-item
        v-if="record.status === 12 && statusIcon[13]"
        @click="doAction('handleStopStart',record, false)"
      >
        <p>
          <i class="iconfont icon-guaqi" :style="{ color: statusIcon[13].color }"></i>
          {{ $t('suspended') }}
        </p>
      </a-menu-item>
      <!--进行中: 挂起才能恢复到进行中 -->
      <a-menu-item
        v-if="record.status === 13 && statusIcon[12]"
        @click="doAction('handleStopStart',record, true)"
      >
        <p>
          <i
            class="iconfont icon-zhengzaijinxing"
            :style="{ color: statusIcon[12].color }"
          ></i>
          <!-- 进行中改成了已生效lxhmodifyxccode -->
          {{ $t('effectived') }}
        </p>
      </a-menu-item>
      <!-- 待审核状态才展示可执行操作 -->
      <!-- 可执行操作 -->
      <a-menu-item v-if="record.status === 6" class="operateItemTitle">{{ $t('operate') }}</a-menu-item>
      <!-- 催办 -->
      <a-menu-item v-if="record.status === 6" @click="doAction('presstodo',record)">
        <p>
          <i class="iconfont icon-cuiban" style="color:#5470C6"></i>
          {{ $t('urge') }}
        </p>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>
<script>
import { mapState } from 'vuex'
import { taskPerms } from '@/config/permission/index'
export default {
  props: {
    record: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    ...mapState({
      taskUpdateDictCode: (state) => state.dict.taskUpdateDictCode,
      statusIcon: (state) => state.dict.taskUpdateStateObj
    }),
    taskUpdateDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskUpdateDictCode')
    },
    editable() {
      return this.record.channel === 1 && this.record.status !== 17 && this.record.status !== 16 && this.record.status !== 18;
    }
  },
  data () {
    return {
      auth: this.$hasPermission([taskPerms.operate])
    }
  },

  methods: {
    getPageDictData () {
      ['getTaskUpdateDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    },
    doAction (type, record, other) {
      this.$emit('action', { type, record, other })
    },
    getPopupContainer () {
      return document.body
    }
  }
}
</script>
<style lang="less">
  .operateItemTitle {
    font-weight: bolder;
    background: #f0f2f5;
    cursor:auto;
    &.ant-dropdown-menu-item:hover{
      background-color: #f0f2f5;
    }
  }
  .operateItemSub{
    cursor:auto;
    &.ant-dropdown-menu-item:hover{
      background-color: #fff;
    }
  }
</style>
